<template>
  <div class="category">
    <!-- 搜索栏 -->
    <van-search v-model="value" placeholder="请输入搜索关键词" />


    <div class="content">
      <div class="slidebar">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            :title="item.name"
            v-for="item in categoryList"
            :key="item.id"
            @click="otherFn(item.id)"
          />
        </van-sidebar>
      </div>

      <div class="banner">
        <img :src="banner_url" alt="" />
        <p>{{ front_desc }}</p>
        <h3>——{{ name }}——</h3>
        <van-grid :column-num="3" square :border="false">
          <van-grid-item
            :icon="item.wap_banner_url"
            :text="item.name"
            v-for="item in subCategoryList"
            :key="item.id"
          />
        </van-grid>

       </div>
       </div>

      </div>

</template>

<script>


import { GetChannelDataApi } from "@/https/http.js";
export default {
  name: "VueCategory",
  components: {},

  data() {
    return {
      value: "",
      categoryList: [],
      id: "",
      activeKey: 0,
      front_desc: "",
      banner_url: "",
      name: "",
      subCategoryList: [],
    };
  },

    created() {
        console.log()
         GetChannelDataApi().then(res=>{
             console.log(222,res)
             this.categoryList=res.data.data.categoryList
             let {front_desc,banner_url,name} =res.data.data.currentCategory
                let {subCategoryList}=res.data.data.currentCategory
                this.subCategoryList=subCategoryList
                this.front_desc=front_desc
                this.banner_url=banner_url
                this.name=name
         })
      
    },
   
  methods: {
    otherFn(id) {
      GetChannelDataApi({ id }).then((res) => {
        console.log(999, res);
        let { front_desc, banner_url, name } = res.data.data.currentCategory;
        let { subCategoryList } = res.data.data.currentCategory;
        this.subCategoryList = subCategoryList;
        this.front_desc = front_desc;
        this.banner_url = banner_url;
        this.name = name;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.category {
  .content {
    display: flex;
    // width: 80%;
    .banner {
      text-align: center;
      position: relative;
      img {
        width: 100%;
      }
      h3 {
        margin: 35px 0;
      }
      p {
        position: absolute;
        top: 40px;
        left: 50%;
        transform: translateX(-50%);
        color: white;
      }
    }
  }
}

</style>
